<template>
  <div v-for="item in list" :key="item.id">
    <el-sub-menu v-if="isNotEmpty(item.children)" :index="item.id">
      <template #title>
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span v-show="!collapse">{{item.title}}</span>
      </template>
      <div v-for="childItem in item.children" :key="childItem.id">
        <el-sub-menu v-if="isNotEmpty(childItem.children)" :index="childItem.path">
          <template #title>
            <el-icon>
              <component :is="childItem.icon"></component>
            </el-icon>
            <span>{{childItem.title}}</span>
          </template>
          <el-menu-item v-for="grandChildItem in childItem.children" :key="grandChildItem.id" :index="grandChildItem.path" @click="goPage(grandChildItem)">
            {{grandChildItem.title}}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="childItem.path" @click="goPage(childItem)">
          <template #title>
            <el-icon>
              <component :is="childItem.icon"></component>
            </el-icon>
            {{childItem.title}}
          </template>
        </el-menu-item>
      </div>
    </el-sub-menu>

    <el-menu-item v-else :index="item.path" @click="goPage(item)">
      <template #title>
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{item.title}}</span>
      </template>
    </el-menu-item>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue-demi'
import { useRouter } from 'vue-router'
export default {
  name: "Submenu",
  props: {
    list: Array,
    collapse: Boolean,
    theme: String
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      list: props.list,
      collapse: props.collapse,
      theme: props.theme
    })
    // 开始跳转
    const goPage = (item) => {
      let { path } = item
      router.push(path)
    }
    // 判断路由是否为空
    const isNotEmpty = (children) => {
      if (children) {
        return true
      }
      return false
    }
    return {
      ...toRefs(state),
      goPage,
      isNotEmpty
    }
  },
}
</script>

<style lang="scss">
</style>